<!-- 逾期提醒 -->
<template>
  <div class="container">
    <el-table :data="overduelist" :height="cardHeight" style="width: 100%" :show-header="false"
      @row-click="OverdueRowClick">
      <!-- <el-table-column prop="billNumber" label="单号"> </el-table-column> -->
      <el-table-column prop="planBackDate" label="预计归还日期"> </el-table-column>
      <el-table-column prop="overdueDays" label="逾期天数">
        <template #default="{ row }">
          <span>逾期
            <span class="danger_button"> {{ row.overdueDays }}</span>

            天</span>
        </template></el-table-column>
      <el-table-column prop="labelType" label="类型">
        <template #default="{ row }">
          <el-tag size="small">{{ row.labelType == 0 ? '档案' : '档案盒' }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <overdueDialog ref="overdueDialog"></overdueDialog>
  </div>
</template>

<script>
import { queryOverdueOutBillList } from '@/api/rfid/board'
import overdueDialog from '@/views/WorkHome/dialog/overdueDialog.vue'

export default {
  name: 'overdueWarring',
  components: {
    overdueDialog,
  },
  props: {
    cardHeight: {
      type: Number,
      default: 250,
    },
  },
  data() {
    return {
      overduelist: [],
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getOverdueOutBillList()
  },
  methods: {
    // 逾期提醒的行点击事件
    OverdueRowClick(row) {
      this.$refs.overdueDialog.openDialog(row)
    },
    // 获取逾期数据
    getOverdueOutBillList() {
      queryOverdueOutBillList().then((res) => {
        if (res.data.code === 200) {
          this.overduelist = res.data.data
        }
      })
    },
  },
}
</script>
<style lang="less" scoped></style>
